<template>
  <div style="position: relative; width: 1100px; height: 400px; margin: 0 auto;">
      <div class="title">
        <div class="title_icon">
          <el-icon size="40">
              <Menu />
          </el-icon>
        </div>
        <div class="title-text">课程添加</div>
      </div>
      <div class="form_wrap">
        <div class="form_left">
           <el-form :model="addForm" :rules="rules" ref="courseForm">
             <el-form-item label="课程名称" prop="Cname">
                 <el-input v-model="addForm.Cname"></el-input> <span>60字以内</span>
               </el-form-item>
             <el-form-item  label="课程描述" prop="Cdescribe">
                 <el-input v-model="addForm.Cdescribe"></el-input> <span>100字以内</span>
             </el-form-item>
             <el-form-item  label="课程价格" prop="Cprice">
                 <el-input v-model="addForm.Cprice"></el-input> <span>课程以元为单位，0为免费</span>
             </el-form-item>
             <el-form-item label="专业选择">
                <div style="display: flex;">
                  <el-select v-model="addForm.CategoryOne">
                    <el-option v-for="item in opt1" :key="item" :label="item.label" :value="item.value">{{item.label}}</el-option>
                  </el-select>
                  <el-select v-model="addForm.CategoryTwo">
                     <el-option v-for="item in opt2" :key="item" :label="item.label" :value="item.value">{{item.label}}</el-option>
                  </el-select>
                  <el-select v-model="addForm.CategoryThree">
                     <el-option v-for="item in opt3" :key="item" :label="item.label" :value="item.value">{{item.label}}</el-option>
                  </el-select>
                </div>
             </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="toAdd">保存</el-button>
             </el-form-item>
            </el-form>
        </div>
          <div class="form_right">
                 <h1 style="margin-left:150px ;">课程封面</h1>
              <div class="img_wrap">
           
                    <div>
                     <el-upload
                      class="avatar-uploader"
                      action="/VueHandler/VueHandler/UpLoadPicHandler"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      >
                      <img v-if="imageUrl" :src="'http://127.0.0.1:3000'+imageUrl" class="avatar">
                      <div v-if="!imageUrl" style="width: 200px; height: 178px; display: flex;
                      justify-content: center; align-items: center;">
                        <el-icon size="50" >
                              <Plus></Plus>
                        </el-icon>
                       </div>
                     </el-upload>
                  </div>
                  <div class="upload_btn">
                    <el-link type="primary">取消</el-link>
                     <el-link type="success">上传</el-link>
                  </div>

              </div>
          </div>
      </div>
      <div class="cover" v-if="coverFlag"></div>
  </div>
</template>
<script setup>
  import {Menu,Plus} from '@element-plus/icons-vue'
  import {reactive,ref} from 'vue'
  import {opt1,opt2,opt3} from '@/utils/cate.js'
  import {addCourseApi,getCourseInfoApi} from '@/api/course'
  import {ElMessage} from 'element-plus'
  import {useRouter,useRoute} from 'vue-router'
  import mitt from '@/utils/mitt'
  let router=useRouter()
  let route=useRoute();
  let addForm=ref({
    Cpic:"",//上传的图片地址
    Cname:"",//课程名称
    Cdescribe:"",//课程描述
    Cprice:"",//课程价格
    CategoryOne:"",//专业选择
    CategoryTwo:"",
    CategoryThree:""
  })
  let imageUrl=ref('')
 let handleAvatarSuccess=(res)=>{ //上传成功回调函数
  console.log(res,"接口返回数据")
   addForm.value.Cpic=res.cacheName; //存储上传成功返回的图片
    imageUrl.value=res.cacheName; //展示图片
 }
 let rules={
  Cname:[{required:true,message:"请输入课程名称",trigger:"blur"}],
  Cdescribe:[{required:true,message:"请输入课程描述",trigger:"blur"}],
  Cprice:[{required:true,message:"请输入课程价格",trigger:"blur"}],
 }
// 刷新的时候 如果地址栏有ID 回显操作
if(route.query.ID){
    getCourseInfoApi(route.query.ID).then(res=>{
        console.log(res,"课程基本信息")
        coverFlag.value=true;
       addForm.value=res.data.courselist;
      //  兄弟组件传参 传送目录列表
      mitt.emit("sendDir",res.data.dirlist) 
       imageUrl.value=res.data.courselist.Cpic;
    })
}


 let coverFlag=ref(false)
let courseForm=ref()
 let toAdd= ()=>{
  courseForm.value.validate(async (valid)=>{
    if(valid){
      if(addForm.value.Cpic){
            let res=await addCourseApi(addForm.value)
            console.log(res,"添加成功")
            // courseForm.value.resetFields()//重置表单
            ElMessage.success("添加成功")
            coverFlag.value=true;
            router.push({
              name:"courseadd",
              query:{
                ID:res.ID,
                _id:res._id
              }
            })
            
      }else{
        ElMessage.error("请上传图片")
      }
    }
  })

 }
</script>
<style lang="scss">
  .title{
     width: 1100px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     color: white;
     border: 1px solid white;
     margin: 0 auto;
  display: flex;
  .title_icon{
   width: 50px;
   height: 50px;
        border: 1px solid white;
  }
}
.form_wrap{
  width: 1100px;
  display: flex;
  height: 400px;
  margin: 0 auto;
  .form_left{
    width:60%;
    margin-left:20px;
    margin-top: 20px;
     .el-input{
     width: 400px;
     margin-right: 20px;
    }
    .el-form-item__label{
      color:white;
    }
    .el-select{
      width: 200px;
      margin-right: 20px;
    }
  }
  .form_right{
    width: 40%;
    .img_wrap{
      width: 200px;
      height: 220px;
      // border: 1px solid white;
      margin-left: 150px;
      margin-top: 20px;
      img{
        width: 300px;
        height: 350px;

      }
      .upload_btn{
        display: flex;
        justify-content: space-between;
      }
      
    }
  }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px !important;
    height: 178px !important;
    display: block;
  }
  .cover{
    width: 1100px;
    height: 400px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left:0;
    top:0;
  }
</style>